<template>
	<view class="box">
		<view v-if="itemForm.id" class="delBox" @tap="clickDel(itemForm.id)">删除</view>
		<view class="flex">
			<view class="flexPre">
				<view class="w64 labelPre">收货人</view>
			</view>
			<view class="flexNext">
				<view class="addInputV">
					<input class="addInput" type="text" placeholder="名字" v-model="recipient_name" data-id="consignee"
						:disabled="disabled" />
				</view>
			</view>
		</view>

		<view class="flex">
			<view class="flexPre">
				<view class="w64 labelPre">手机号码</view>
			</view>
			<view class="flexNext">
				<view class="addInputV">
					<input class="addInput" type="text" placeholder="手机号" v-model="recipient_tel" data-id="phone"
						:disabled="disabled" />
				</view>
			</view>
		</view>

		<view class="flex">
			<view class="flexPre">
				<view class="w64 labelPre">所在地区</view>
			</view>
			<view class="flexNext">
				<view class="addInputV">
					<picker mode="region" @change="bindRegionChange" style="heght:92rpx;line-height:92rpx;color: #333;"
						:disabled="disabled">
						<view class="picker">
							<text v-if="region.length>0">{{region[0]}} {{region[1]}} {{region[2]}}</text>
							<text v-else>请选择省市区</text>
						</view>
					</picker>
				</view>

			</view>
		</view>


		<view class="flex">
			<view class="flexPre">
				<view class="w64 labelPre">详细地址</view>
			</view>
			<view class="flexNext">
				<view class="addInputV">
					<input class="addInput" type="text" placeholder="小区楼栋/乡村名称" v-model="recipient_address"
						data-id="detail_address" :disabled="disabled" />
				</view>
			</view>
		</view>
		<view class="flex" v-if="itemForm.id && itemForm.moren==0">
			<view class="flexPre">
				<view class="w130 labelPre">设置默认收货地址</view>
			</view>
			<view class="flexNext2">
				<switch color="#EC6C4F" :checked="typeBool" @change="changeSwitch"></switch>
			</view>
		</view>

		<view class="btnV">
			<view class="btn" @tap="$u.throttle(submit, 500)">保存</view>
		</view>

	</view>
</template>

<script>
	import {
		addAddres,
		handleAddress
	} from '@/config/api.js'

	export default {

		data() {
			return {
				region: [],
				disabled: false,
				//收货人
				recipient_name: '',
				//手机号
				recipient_tel: '',

				//详细地址
				recipient_address: '',
				itemForm: {},
				//1默认2不默认
				type: 2,

				typeBool: false,

			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			// 判断是新增还是编辑收获地址的标题

			if (options.item) {
				uni.setNavigationBarTitle({
					title: '修改地址'
				});
				let item = JSON.parse(options.item);
				// console.log(item);
				this.disabled = true
				this.itemForm = item
				this.recipient_name = item.title
				this.recipient_tel = item.mobile
				this.region[0] = item.province
				this.region[1] = item.city
				this.region[2] = item.area
				this.recipient_address = item.address
				this.type = item.moren
				this.typeBool = item.moren == 1 ? true : false
				this.isRevise = true

			} else {
				uni.setNavigationBarTitle({
					title: '添加地址'
				});
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		methods: {
			bindRegionChange(e) {

				this.region = e.detail.value

			},
			submit() {
				// 所有填空需要必填判断
				if (this.recipient_name == '') {
					uni.showToast({
						title: '请输入收货人名字',
						icon: 'none'
					});
					return;
				}
				if (this.recipient_tel == '') {
					uni.showToast({
						title: '请输入收货人手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^1[3456789]\d{9}$/.test(this.recipient_tel)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				if (this.region.length == 0) {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none'
					});
					return;
				}
				if (this.recipient_address == '') {
					uni.showToast({
						title: '请输入收货人详细地址',
						icon: 'none'
					});
					return;
				}
				if (this.itemForm.id > 0) {
					this.submitedit();
				} else {
					this.submitadd();
				}
			},
			changeSwitch(e) {
				this.type = e.detail.value == true ? 1 : 2
			},
			async submitadd() {
				uni.showLoading({
					mask: true
				})
				let res = await addAddres({
					recipient_name: this.recipient_name,
					recipient_tel: this.recipient_tel,
					province: this.region[0],
					city: this.region[1],
					area: this.region[2],
					recipient_address: this.recipient_address,
				})
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: "none"
				});

				setTimeout(() => {
					if (res.code == 1) {
						uni.navigateBack();
					}
				}, 1000);
			},

			async submitedit() {
				let res = await handleAddress({
					type: this.type == 1 ? 'default' : '',
					address_id: this.itemForm.id,
				});
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});

				setTimeout(() => {
					if (res.code == 1) {
						uni.navigateBack();
					}
				}, 1000);
			},
			clickDel(id) {

				uni.showModal({
					title: '提示',
					content: '确定删除该地址吗？',
					success: (res) => {
						if (res.confirm) {
							this.delQuest(id);
						}
					}
				});
			},

			async delQuest(id) {

				let res = await handleAddress({
					type: 'del',
					address_id: id,
				});
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});

				setTimeout(() => {
					if (res.code == 1) {
						uni.navigateBack();
					}
				}, 1000);
			},

			// renderConOrder() {
			// 	let pages = getCurrentPages(); //当前页面栈
			// 	if (pages.length > 1) {
			// 		let beforePage = pages[pages.length - 3]; //获取上一个页面实例对象
			// 		if (beforePage.route == 'page_my/pointmall/conorder/conorder') {
			// 			beforePage.getList();
			// 		}
			// 	}
			// }
		}
	};
</script>
<style>
	.box {
		padding: 30rpx 40rpx 30rpx 30rpx;
	}

	.delBox {
		color: #ff4a03;
		font-size: 28rpx;
		padding: 0 0 40rpx 0;
		text-align: right;
	}

	.flex {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.labelPre {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
	}

	.w64 {
		width: 148rpx;
	}

	.flexNext {
		flex: 1;
		height: 92rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.addInputV {
		flex: 1;
		padding: 0 0 0 40rpx;
		height: 100%;
	}

	.addInput {
		color: #333333;
		font-size: 28rpx;
		height: 100%;
	}

	.locIcon {
		width: 34rpx;
		height: 38rpx;
		padding-right: 20rpx;
	}

	.w130 {
		width: 260rpx;
	}

	.flexNext2 {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.btnV {
		padding: 40rpx 50rpx 40rpx 50rpx;
	}

	.btn {
		width: 100%;
		height: 84rpx;
		background: linear-gradient(90deg, #ec6c4f 0%, #ff820d 100%);
		border-radius: 44rpx;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	input {
		padding: 0 !important;
	}

	.addInput {
		background-color: inherit !important;
	}
</style>